import type {
  MouseEvent,
  PropsWithChildren,
  CSSProperties,
} from 'react'
import type { MaskProps } from '../Mask'
import { NativeProps } from '../../utils/native-props'

export type PopupBaseProps = {
  /** 内容区域类名. default: - */
  bodyClassName?: string
  /** 内容区域样式. default: - */
  bodyStyle?: CSSProperties
  /**
   * 点击背景蒙层后是否触发onClose（即点击背景蒙层后是否关闭）. default: `true`.
   * Dialog Component. default: `false`
   * */
  closeOnMaskClick?: boolean
  /** 是否展示遮罩. default: `true` */
  mask?: boolean
  /** 遮罩类名. default: - */
  maskClassName?: string
  /** 遮罩样式. default: - */
  maskStyle?: MaskProps['style']
  /** 点击时触发 常用于阻止事件冒泡. default: - */
  onClick?: (event: MouseEvent) => void
  /** 关闭时触发. default: - */
  onClose?: () => void
  /** 是否显示关闭按钮. default: `true` */
  showCloseButton?: boolean
} & Pick<
  MaskProps,
  /** default: - */
  | 'afterShow'
  /** default: - */
  | 'afterClose'
  /** default: false */
  | 'destroyOnClose'
  /** default: `true` */
  | 'disableBodyScroll'
  /** default: `false` */
  | 'forceRender'
  /** default: `() => document.body` */
  | 'getContainer'
  /** default: - */
  | 'onMaskClick'
  /** default: `['click']` */
  | 'stopPropagation'
  /** default: `false` */
  | 'visible'
>

export type PopupProps = PopupBaseProps &
  PropsWithChildren<{
    /** popup弹出位置. default: `bottom` */
    position?: 'bottom' | 'top' | 'left' | 'right'
    /** 滑动是否关闭. 仅支持 position === `bottom` | `top`. default: `false` */
    closeOnSwipe?: boolean
  }> & NativeProps<
    /** 元素的 z-index. default: 999. globalVariable: --rt-popup-z-index */
    '--z-index'
  >
